
// Flex#
// 属性	说明	类型	默认值
// direction	项目定位方向，值可以为 row,row-reverse,column,column-reverse, RN 仅支持row,column	String	row
// wrap	子元素的换行方式，可选nowrap,wrap,wrap-reverse, RN 仅支持nowrap,wrap	String	nowrap
// justify	子元素在主轴上的对齐方式，可选start,end,center,between,around	String	start
// align	子元素在交叉轴上的对齐方式，可选start,center,end,baseline,stretch RN仅支持start,end,center,stretch	String	center
// alignContent	有多根轴线时的对齐方式，可选start,end,center,between,around,stretch	String	stretch


@mixin flex-box($direction:row, $justify:start, $align:start, $wrap:nowrap,$alignContent:stretch) {
   display: flex;
  // flex-direction: $direction;
  // justify-content: $justify;
  // align-items: $align;
  @include flex-direction($direction);
  @include justify-content($justify);
  @include align-items($align);
  @include flex-wrap($wrap);
  @include align-content($alignContent);
  

}

@mixin flex-wrap($value: nowrap) {
  flex-wrap: $value;
}

@mixin flex-direction($direction: row) {
  flex-direction: $direction;
  @if $direction == row {
      flex-direction: row;
  } @else {
      flex-direction: column;
  }
}

@mixin align-items($value: start) {
  
  @if $value == start {
    align-items: flex-start;
    -webkit-box-align: start;
  } @else if $value == end {
    align-items: flex-end;
    -webkit-box-align: end;
  } @else {
    align-items: $value;
    -webkit-box-align: $value;
  }
}

@mixin align-content($value: stretch) {
  //align-content: $value;

  @if $value == start {
    align-content:flex-start;
  } @else if $value == end {
    align-content:flex-end;
  } @else if $value == between {
    align-content:space-between;
  } @else if $value == around {
    align-content:space-around;
  } @else {
      align-content: $value;
  }
}

@mixin justify-content($value: start) {
 
  @if $value == start {
    justify-content:flex-start;
    -webkit-box-pack: start;
  } @else if $value == end {
    justify-content:flex-end;
    -webkit-box-pack: end;
  } @else if $value == between {
    justify-content:space-between;
    -webkit-box-pack: justify;
  } @else if $value == around {
    justify-content:space-around;
    -webkit-box-pack: space-around;
  } @else {
     justify-content: $value;
     -webkit-box-pack: $value;
  }
}